.progress {
	--progress-color: var(--color-5);

	width: 100%;
	height: calc(0.5rem - 2px);
	overflow: hidden;
	background: var(--color-bg-3);
	border-radius: 0.25rem;

	.bar {
		position: relative;
		height: 100%;
		background: var(--progress-color);
		border-radius: 0.25rem;
		transition: width ease 0.3s;
	}

	&.active {
		.bar::before {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #fff;
			border-radius: 10px;
			opacity: 0;
			animation: progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
			content: '';
		}
	}

	&.stopped,
	&.failed {
		.bar {
			background: var(--color-error);
		}
	}

	@keyframes progress-active {
		0% {
			width: 0;
			opacity: 0.1;
		}
		20% {
			width: 0;
			opacity: 0.5;
		}
		100% {
			width: 100%;
			opacity: 0;
		}
	}
}
